<template>
<view class="bottom-bar">
	<view class="bottom-bar-relative">
		
	</view>
	<!-- 安全区 -->
	<basic-safe-area />
	
	<view class="bottom-bar-fixed">
		<view class="bottom-bar-content">
		  <slot/>			
		</view>
		<!-- 安全区 -->
		<basic-safe-area />
	</view>
	
</view>
</template>
<script>
export default {
	name: 'bottom-bar'
}
</script>
<style lang="less">
.bottom-bar{
	.bottom-bar-relative{
		position: relative;
		height: @bottom_bar_height;
		width: 100%;
		background: inherit;
	}
	.bottom-bar-fixed{
		position: fixed;
		z-index: 999;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		display: flex;
		flex-direction: column;	
		.bottom-bar-content{
			display: flex;	
			width: 100%;	
			height: @bottom_bar_height;
			line-height: @bottom_bar_height;
			box-shadow: 0px 0px 14rpx 0rpx rgba(204, 204, 204, 0.5);
		}
	}
}
</style>